<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>博客 - 610书窝小程序</title>
  <link rel="stylesheet" href="../../assets/css/style.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link
    href="https://fonts.googleapis.com/css2?family=Jost:wght@400;500;600&family=Work+Sans:wght@400;500;700&display=swap"
    rel="stylesheet">
  <style>
    /* 博客页面特定样式 */
    .mp-blog-header {
      background-color: var(--primary-pink);
      padding: var(--spacing-3);
      color: var(--white-1);
      position: relative;
      overflow: hidden;
    }

    .mp-blog-header::after {
      content: '';
      position: absolute;
      bottom: -20px;
      left: 0;
      width: 100%;
      height: 40px;
      background-color: var(--white-1);
      border-radius: 50% 50% 0 0;
    }

    .mp-blog-title {
      font-size: var(--fs-1);
      margin-bottom: var(--spacing-2);
      position: relative;
      z-index: 1;
    }

    .mp-blog-subtitle {
      font-size: var(--fs-5);
      opacity: 0.9;
      position: relative;
      z-index: 1;
    }

    .mp-blog-filters {
      display: flex;
      overflow-x: auto;
      padding: var(--spacing-3);
      background-color: var(--white-1);
      gap: var(--spacing-2);
    }

    .mp-blog-filter {
      padding: var(--spacing-1) var(--spacing-2);
      background-color: var(--light-bg-pink);
      border-radius: var(--radius-pill);
      font-size: var(--fs-6);
      white-space: nowrap;
      color: var(--dark-pink-text);
      border: none;
    }

    .mp-blog-filter.active {
      background-color: var(--primary-pink);
      color: var(--white-1);
    }

    .mp-blog-search {
      padding: 0 var(--spacing-3);
      margin-bottom: var(--spacing-3);
    }

    .mp-search-input {
      display: flex;
      background-color: var(--light-bg-pink);
      border-radius: var(--radius-pill);
      padding: var(--spacing-2);
      width: 100%;
    }

    .mp-search-input input {
      flex: 1;
      border: none;
      background: transparent;
      padding: 0 var(--spacing-2);
      color: var(--dark-pink-text);
    }

    .mp-search-input input::placeholder {
      color: var(--medium-gray);
    }

    .mp-search-input button {
      background-color: var(--primary-pink);
      border: none;
      color: var(--white-1);
      width: 36px;
      height: 36px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .mp-blog-featured {
      margin-bottom: var(--spacing-3);
      padding: 0 var(--spacing-3);
    }

    .mp-featured-card {
      background-color: var(--white-1);
      border-radius: var(--radius-card);
      overflow: hidden;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    }

    .mp-featured-img {
      height: 180px;
      background-color: var(--soft-gray);
      position: relative;
    }

    .mp-featured-img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .mp-featured-tag {
      position: absolute;
      top: var(--spacing-2);
      left: var(--spacing-2);
      background-color: var(--primary-pink);
      color: var(--white-1);
      font-size: var(--fs-6);
      padding: 4px var(--spacing-2);
      border-radius: var(--radius-pill);
    }

    .mp-featured-content {
      padding: var(--spacing-3);
    }

    .mp-featured-title {
      font-size: var(--fs-3);
      color: var(--dark-pink-text);
      margin-bottom: var(--spacing-1);
    }

    .mp-featured-meta {
      display: flex;
      color: var(--medium-gray);
      font-size: var(--fs-6);
      margin-bottom: var(--spacing-2);
      gap: var(--spacing-3);
    }

    .mp-featured-meta span {
      display: flex;
      align-items: center;
    }

    .mp-featured-meta i {
      margin-right: 4px;
    }

    .mp-featured-desc {
      color: var(--medium-gray);
      font-size: var(--fs-5);
      line-height: 1.6;
      margin-bottom: var(--spacing-2);
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .mp-featured-link {
      color: var(--primary-pink);
      font-size: var(--fs-5);
      font-weight: var(--fw-500);
      display: flex;
      align-items: center;
    }

    .mp-featured-link i {
      margin-left: var(--spacing-1);
      font-size: 14px;
    }

    .mp-blog-list {
      padding: 0 var(--spacing-3);
    }

    .mp-blog-section-title {
      font-size: var(--fs-4);
      color: var(--dark-pink-text);
      margin-bottom: var(--spacing-3);
      padding-left: var(--spacing-1);
      border-left: 3px solid var(--primary-pink);
    }

    .mp-blog-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: var(--spacing-3);
      margin-bottom: var(--spacing-4);
    }

    .mp-blog-card {
      background-color: var(--white-1);
      border-radius: var(--radius-card);
      overflow: hidden;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    }

    .mp-blog-img {
      height: 120px;
      background-color: var(--soft-gray);
      position: relative;
    }

    .mp-blog-img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .mp-blog-content {
      padding: var(--spacing-2);
    }

    .mp-blog-title {
      font-size: var(--fs-5);
      color: var(--dark-pink-text);
      margin-bottom: var(--spacing-1);
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .mp-blog-meta {
      display: flex;
      color: var(--medium-gray);
      font-size: var(--fs-6);
      justify-content: space-between;
    }
  </style>
</head>

<body>
  <!-- 头部导航 -->
  <header class="mp-header">
    <div class="mp-logo">
      <img src="../../assets/images/logo.svg" alt="610书窝">
    </div>
    <h1 class="mp-title">博客</h1>
  </header>

  <!-- 主体内容 -->
  <main>
    <!-- 博客头部 -->
    <section class="mp-blog-header">
      <h2 class="mp-blog-title">读书笔记 & 书评</h2>
      <p class="mp-blog-subtitle">发现好书，分享阅读心得</p>
    </section>

    <!-- 分类筛选 -->
    <div class="mp-blog-filters">
      <button class="mp-blog-filter active">全部</button>
      <button class="mp-blog-filter">文学小说</button>
      <button class="mp-blog-filter">历史传记</button>
      <button class="mp-blog-filter">心理励志</button>
      <button class="mp-blog-filter">科技科普</button>
      <button class="mp-blog-filter">艺术设计</button>
    </div>

    <!-- 搜索框 -->
    <div class="mp-blog-search">
      <div class="mp-search-input">
        <i class="fas fa-search" style="color: var(--medium-gray);"></i>
        <input type="text" placeholder="搜索博客文章...">
        <button><i class="fas fa-arrow-right"></i></button>
      </div>
    </div>

    <!-- 精选文章 -->
    <section class="mp-blog-featured">
      <div class="mp-featured-card">
        <div class="mp-featured-img">
          <img src="../../assets/images/blog-featured.jpg" alt="精选文章">
          <span class="mp-featured-tag">精选</span>
        </div>
        <div class="mp-featured-content">
          <h3 class="mp-featured-title">《活着》：生命的韧性与尊严</h3>
          <div class="mp-featured-meta">
            <span><i class="far fa-user"></i>小A</span>
            <span><i class="far fa-calendar-alt"></i>2024-05-20</span>
            <span><i class="far fa-eye"></i>1254</span>
          </div>
          <p class="mp-featured-desc">
            余华的《活着》以朴实无华的叙述手法，展现了人在苦难中的生存状态。福贵的一生经历了从富家少爷到穷困农民的转变，见证了中国近代史上的重大事件...
          </p>
          <a href="articles/living.html" class="mp-featured-link">
            阅读全文 <i class="fas fa-long-arrow-alt-right"></i>
          </a>
        </div>
      </div>
    </section>

    <!-- 最新文章 -->
    <section class="mp-blog-list">
      <h2 class="mp-blog-section-title">最新文章</h2>
      <div class="mp-blog-grid">
        <div class="mp-blog-card">
          <div class="mp-blog-img">
            <img src="../../assets/images/blog-1.jpg" alt="博客文章">
          </div>
          <div class="mp-blog-content">
            <h3 class="mp-blog-title">《平凡的世界》：普通人的伟大</h3>
            <div class="mp-blog-meta">
              <span><i class="far fa-user"></i> 小B</span>
              <span><i class="far fa-calendar-alt"></i> 2天前</span>
            </div>
          </div>
        </div>
        <div class="mp-blog-card">
          <div class="mp-blog-img">
            <img src="../../assets/images/blog-2.jpg" alt="博客文章">
          </div>
          <div class="mp-blog-content">
            <h3 class="mp-blog-title">《三体》：宇宙的黑暗森林法则</h3>
            <div class="mp-blog-meta">
              <span><i class="far fa-user"></i> 小C</span>
              <span><i class="far fa-calendar-alt"></i> 3天前</span>
            </div>
          </div>
        </div>
        <div class="mp-blog-card">
          <div class="mp-blog-img">
            <img src="../../assets/images/blog-3.jpg" alt="博客文章">
          </div>
          <div class="mp-blog-content">
            <h3 class="mp-blog-title">《解忧杂货店》：温暖人心的故事</h3>
            <div class="mp-blog-meta">
              <span><i class="far fa-user"></i> 小A</span>
              <span><i class="far fa-calendar-alt"></i> 1周前</span>
            </div>
          </div>
        </div>
        <div class="mp-blog-card">
          <div class="mp-blog-img">
            <img src="../../assets/images/blog-4.jpg" alt="博客文章">
          </div>
          <div class="mp-blog-content">
            <h3 class="mp-blog-title">《乌合之众》：群体心理学解析</h3>
            <div class="mp-blog-meta">
              <span><i class="far fa-user"></i> 小D</span>
              <span><i class="far fa-calendar-alt"></i> 2周前</span>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 热门文章 -->
    <section class="mp-blog-list">
      <h2 class="mp-blog-section-title">热门文章</h2>
      <div class="mp-blog-grid">
        <div class="mp-blog-card">
          <div class="mp-blog-img">
            <img src="../../assets/images/blog-5.jpg" alt="博客文章">
          </div>
          <div class="mp-blog-content">
            <h3 class="mp-blog-title">《红楼梦》：一部关于人性的百科全书</h3>
            <div class="mp-blog-meta">
              <span><i class="far fa-user"></i> 小B</span>
              <span><i class="far fa-eye"></i> 2541</span>
            </div>
          </div>
        </div>
        <div class="mp-blog-card">
          <div class="mp-blog-img">
            <img src="../../assets/images/blog-6.jpg" alt="博客文章">
          </div>
          <div class="mp-blog-content">
            <h3 class="mp-blog-title">《百年孤独》：魔幻现实主义的代表作</h3>
            <div class="mp-blog-meta">
              <span><i class="far fa-user"></i> 小C</span>
              <span><i class="far fa-eye"></i> 2187</span>
            </div>
          </div>
        </div>
        <div class="mp-blog-card">
          <div class="mp-blog-img">
            <img src="../../assets/images/blog-7.jpg" alt="博客文章">
          </div>
          <div class="mp-blog-content">
            <h3 class="mp-blog-title">《人类简史》：从智人到智神的进化</h3>
            <div class="mp-blog-meta">
              <span><i class="far fa-user"></i> 小A</span>
              <span><i class="far fa-eye"></i> 1973</span>
            </div>
          </div>
        </div>
        <div class="mp-blog-card">
          <div class="mp-blog-img">
            <img src="../../assets/images/blog-8.jpg" alt="博客文章">
          </div>
          <div class="mp-blog-content">
            <h3 class="mp-blog-title">《追风筝的人》：救赎与友情</h3>
            <div class="mp-blog-meta">
              <span><i class="far fa-user"></i> 小D</span>
              <span><i class="far fa-eye"></i> 1865</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  </main>

  <!-- 底部导航 -->
  <footer class="mp-tabbar">
    <a href="../../index.html" class="mp-tab-item">
      <i class="fas fa-home"></i>
      <span>首页</span>
    </a>
    <a href="../shop/index.html" class="mp-tab-item">
      <i class="fas fa-shopping-bag"></i>
      <span>商店</span>
    </a>
    <a href="../blog/index.html" class="mp-tab-item active">
      <i class="fas fa-book-open"></i>
      <span>博客</span>
    </a>
    <a href="../about/index.html" class="mp-tab-item">
      <i class="fas fa-info-circle"></i>
      <span>关于</span>
    </a>
    <a href="../member/index.html" class="mp-tab-item">
      <i class="fas fa-user"></i>
      <span>我的</span>
    </a>
  </footer>

  <script src="../../assets/js/script.js"></script>
</body>

</html>